import React from 'react';
import { Drawer, Row, Col, Tag, Button } from 'antd';
import moment from 'moment';
import { getQualityTag, getHour } from '../../utils';
import styles from './index.less';

// 抽屉式任务详情
const TaskInfo = ({ visible, onClose, data = {}, userdata = {} }) => {
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};

    const rt = getQualityTag(data.evalRank);
    return (
        <Drawer
            title={data.taskName}
            visible={visible}
            onClose={onClose}
            closable={false}
            className={styles.taskInfoDrawer}
            width={450}
        >
            <div className={styles.header}>
                {user.employeeName !== userdata.employeeName && (
                    <>
                        <Row style={{ marginBottom: 16 }}>
                            <Col span={5} className={styles.taskColName}>
                                公司：
                            </Col>
                            <Col span={7}>{userdata.companyName}</Col>
                            <Col span={5} className={styles.taskColName}>
                                部门：
                            </Col>
                            <Col span={7}>{userdata.departmentName}</Col>
                        </Row>
                        <Row style={{ marginBottom: 16 }}>
                            <Col span={5} className={styles.taskColName}>
                                职位：
                            </Col>
                            <Col span={7}>{userdata.postName}</Col>
                            <Col span={5} className={styles.taskColName}>
                                职级：
                            </Col>
                            <Col span={7}>{userdata.employeeRank}</Col>
                        </Row>
                    </>
                )}

                <Row style={{ marginBottom: 16 }}>
                    <Col span={5} className={styles.taskColName}>
                        任务ID：
                    </Col>
                    <Col span={7}>{data.taskNo}</Col>
                    {user.employeeName !== userdata.employeeName ? (
                        <>
                            <Col span={5} className={styles.taskColName}></Col>
                            <Col span={7}></Col>
                        </>
                    ) : (
                        <>
                            <Col span={5} className={styles.taskColName}>
                                公司：
                            </Col>
                            <Col span={7}>{userdata.companyName}</Col>
                        </>
                    )}
                </Row>

                <Row style={{ marginBottom: 16 }}>
                    <Col span={5} className={styles.taskColName}>
                        任务类型：
                    </Col>
                    <Col span={7}>{data.taskType}</Col>
                    <Col span={5} className={styles.taskColName}>
                        责任人：
                    </Col>
                    <Col span={7}>{data.employeeName}</Col>
                </Row>
                <Row>
                    <Col span={5} className={styles.taskColName}>
                        产品线：
                    </Col>
                    <Col span={7}>{data.productName}</Col>
                    <Col span={5} className={styles.taskColName}>
                        项目组：
                    </Col>
                    <Col span={7}>{data.projectGroupName}</Col>
                </Row>
            </div>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    开始时间：
                </Col>
                <Col span={18}>{data.planStartDate ? moment(data.planStartDate).format('YYYY-MM-DD') : '--'}</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    计划完成时间：
                </Col>
                <Col span={18}>{data.planEndDate ? moment(data.planEndDate).format('YYYY-MM-DD') : '--'}</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    实际完成时间：
                </Col>
                <Col span={18}>{data.actualEndDate ? moment(data.actualEndDate).format('YYYY-MM-DD') : '--'}</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    计划工作量：
                </Col>
                <Col span={18}>{getHour(data.orginEstimateMinute)}小时</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    实际工作量：
                </Col>
                <Col span={18}>{getHour(data.spentMinute)}小时</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    任务质量：
                </Col>
                <Col span={18}>
                    {data.evalScore ? data.evalScore : '--'} 分 <Tag color={rt.color}>{rt.label}</Tag>
                </Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    完成状态：
                </Col>
                <Col span={18}>
                    {data.taskStatus}
                    <Tag style={{ marginLeft: 5 }} color={data.taskCompleteStatus === '正常' ? 'green' : 'red'}>
                        {data.taskCompleteStatus}
                    </Tag>
                </Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={6} className={styles.taskColName}>
                    任务链接：
                </Col>
                <Col span={18}>
                    <Button
                        style={{ padding: 0, height: 21, lineHeight: '21px' }}
                        className={styles.linkbtn}
                        type="link"
                        target="_blank"
                        href={`http://jira.vv.cn:8000/browse/${data.taskNo}`}
                    >
                        {`http://jira.vv.cn:8000/browse/${data.taskNo}`}
                    </Button>
                </Col>
            </Row>
        </Drawer>
    );
};
export default TaskInfo;
